/**
global transition css
v-enter改成了v-enter-form，v-leave改成了v-leave-from。
**/

/* fade */
.fade-enter-active,
.fade-leave-active {
	transition: var(--el-transition-all);
}

.fade-enter-from,
.fade-leave-active {
	opacity: 0;
}

// 整体项目切换动画
.fade-transform-enter-active {
	animation: fade-transform-in 0.3s ease-out;
}

.fade-transform-leave-active {
	animation: fade-transform-out 0.3s ease-out;
}

/* 想要让动画平滑一点，需要加v-move的类名，v-可以别name的值 */
.fade-transform-move {
	transition: all 0.3s ease-out;
}

@keyframes fade-transform-in {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}

	to {
		transform: translateX(0);
	}
}

@keyframes fade-transform-out {
	from {
		transform: translateX(0);
	}

	to {
		opacity: 0;
		transform: translateX(40px);
	}
}

/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
	transition: var(--el-transition-all);
}

.breadcrumb-enter-from,
.breadcrumb-leave-active {
	opacity: 0;
	transform: translateX(20px);
}

.breadcrumb-move {
	transition: var(--el-transition-all);
}

.breadcrumb-leave-active {
	position: absolute;
}
